<template>
  <el-form :model="loginForm" class="login" ref="loginFormRef">
    <el-image
      style="width: 100%; height: 10rem"
      class="logo"
      :src="logo"
      fit="cover"
    >
    </el-image>
    <el-form-item
      prop="email"
      :rules="[{ required: true, message: '请输入账号' }]"
    >
      <el-input
        type="input"
        placeholder="请输入账号"
        v-model="loginForm.email"
      ></el-input>
    </el-form-item>
    <el-form-item
      prop="userPassword"
      :rules="[{ required: true, message: '请输入密码' }]"
    >
      <el-input
        type="password"
        placeholder="请输入密码"
        v-model="loginForm.userPassword"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="login()" class="login-button" type="primary"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getCurrentInstance } from "vue";
import { SelectMenu } from "../stores/menu";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const loginForm = reactive({
  email: "",
  userPassword: "",
});
const logo = new URL("../assets/image/logo2.jpg", import.meta.url).href;
const menuStore = SelectMenu();
const router = useRouter();
const loginFormRef = ref(null);
const menu = [
{
    path:'/home',
    name:'home',
    label:'首页',
    icon:'HomeFilled',
    url:'home/home'
},
{
    path:'/article',
    name:'article',
    label:'文章管理',
    icon:'video-play',
    url:'article/article'
},  
{
    path:'/user',
    name:'user',
    label:'用户管理',
    icon:'Avatar',
    url:'user/user'
},
{
    path:'/other',
    label:'其它',
    icon:'MoreFilled',
    children:[
        {
            path:'/page1',
            name:'page1',
            label:'页面1',
            icon:'Tools',
            url:'page1'
        },
        {
            path:'/page2',
            name:'page2',
            label:'页面2',
            icon:'Tools',
            url:'page2'
        }
    ]
}
]
const login = async () => {
  // 触发表单验证
  loginFormRef.value.validate(async (valid) => {
    console.log(JSON.stringify(loginForm))
    if (valid) {
      const res = await proxy.$api.getMenu(loginForm);
      console.log(res.data)
      menuStore.setMenu(menu);
      menuStore.addMenu(router);
      menuStore.setUser(res.data.data)
      console.log(res.token);
      menuStore.setToken(res.token);
      router.push({ path: "home" });
    } else {
      ElMessage.error("请输入账号密码");
    }
  });
};
</script>

<style lang="less" scoped>
.login {
  width: 400px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 0.5rem;
  padding: 1rem 0.8rem 0.5rem 0.8rem;
  box-shadow: 0 0 0.5rem #cacaca;
  margin: 10% auto;
  .login-button {
    width: 100%;
  }
}
</style>
